<template>
  <div class="sale">
    <div class="top_button">
      <div class="partition">
        <el-button type="primary" :loading="downloadLoading" @click="sumtable">总表</el-button>
        <el-button type="primary" :loading="downloadLoading" @click="bigtime">已盘大仓</el-button>
        <el-button type="success" :loading="downloadLoading" @click="smalltime">已盘小仓</el-button>
        <el-button type="primary" :loading="downloadLoading" @click="big">大仓</el-button>
        <el-button type="success" :loading="downloadLoading" @click="small">小仓</el-button>
        <el-button type="primary" :loading="downloadLoading" @click="assignordetails('大仓')">盘点人(大)</el-button>
        <el-button type="success" :loading="downloadLoading" @click="assignordetails('小仓')">盘点人(小)</el-button>
        <el-button type="primary" :loading="downloadLoading" @click="long">汇总表</el-button>
        <el-button type="primary" :loading="downloadLoading" @click="imptable">临期表</el-button>
        <el-button type="success" :loading="downloadLoading" @click="backups">备份</el-button>
        <el-button type="primary" :loading="downloadLoading" @click="upbarcode">更新条码</el-button>
        <el-button type="primary" :loading="downloadLoading" @click="upstocks">生成库存表</el-button>
        <el-button @click="download" type="success" icon="el-icon-download"></el-button>
      </div>
<!-- 
      <el-button type="primary" :loading="downloadLoading" @click="unlock" v-if="lock">解开封印</el-button>
      <el-button type="success" :loading="downloadLoading" @click="unlock" v-else>封印</el-button>
      <div
        class="partition"
        v-loading="lock"
        element-loading-text="我是封印"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-button type="primary" :loading="downloadLoading" @click="createbigall">生成全部大仓复盘表</el-button>
        <el-button type="primary" :loading="downloadLoading" @click="createsmallall">生成全部小仓复盘表</el-button>
        <el-button type="primary" :loading="downloadLoading" @click="createbig">生成已盘大仓复盘表</el-button>
        <el-button type="primary" :loading="downloadLoading" @click="createsmall">生成已盘小仓复盘表</el-button>
      </div> -->
      <div class="partition search-prolist">
        <el-radio
        v-for="(ck,i) in cktable"
        v-model="selck"
        :key="i"
        :label="ck"
        border
        ></el-radio>
        <el-button @click="selprolist" v-show="!showsearch">出现吧</el-button>
        <el-input v-show="showsearch" v-model="searchpro" placeholder="输入要修改商品的名称" @keyup.enter="selpro" class="search-pro"/>
        <el-button @click="selpro" v-show="showsearch">查</el-button>
      </div>
      <!-- <div class="partition">
        <el-button type="success" :loading="downloadLoading" @click="smallfp('小仓')">小仓分派复盘</el-button>
        <el-button type="success" :loading="downloadLoading" @click="smallfp('大仓')">大仓分派复盘</el-button>
      </div> -->
    </div>
    <div v-if="isshow">
      <el-checkbox
        v-model="user.ispd"
        v-for="(user,i) in userlist"
        :key="i"
        :label="user.user1"
        border
      ></el-checkbox>
      <div>
        <el-button type="primary" :loading="downloadLoading" @click="fenpai">分派</el-button>
        <el-button type="primary" :loading="downloadLoading" @click="jiechu">解除</el-button>
        <el-button type="primary" :loading="downloadLoading" @click="close">关闭</el-button>
      </div>
    </div>
    <div style="margin: 5px 0;padding: 20px" v-if="!sale_l.length" v-loading="!isres"></div>
    <div v-else>
      <div style="margin: 5px 0"></div>
      <!-- <el-table ref="multipleTable" :data="sale_l" border highlight-current-row>
      <el-table-column type="selection" width="30" ></el-table-column>-->
      <!-- <el-table-column align="center" label="盘点差异报告_2020-06">
                <el-table-column type="index" width="50" label="序号"></el-table-column>
                <el-table-column prop="pn" label="商品名称"></el-table-column>
                <el-table-column prop="pc" label="商品编码"></el-table-column>
                <el-table-column prop="barcode" label="商品条码"></el-table-column>
                <el-table-column prop="ck" label="仓库"></el-table-column>
                <el-table-column prop="zb" label="系统"></el-table-column>
                <el-table-column prop="zb" label="到期日"></el-table-column>
                <el-table-column prop="zb" label="保质期"></el-table-column>
                <el-table-column prop="probox" label="箱规"></el-table-column>
                <el-table-column prop="pd_num" label="盘点数"></el-table-column>
                <el-table-column prop="qty" label="系统总数"></el-table-column>
                <el-table-column prop="diffnum" label="差异"></el-table-column>
                </el-table-column>
      </el-table>-->
      <el-table
        ref="multipleTable"
        :data="sale_l.filter(data => !search || data['商品编码'].toLowerCase().includes(search.toLowerCase()) || data['商品名称'].toLowerCase().includes(search.toLowerCase()))"
        border
        v-loading="!isres"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <!-- <el-table-column type="selection" width="30" ></el-table-column> -->
        <el-table-column align="center" label="盘点差异报告_2021">
          <el-table-column type="index" width="50" label="序号"></el-table-column>
          <el-table-column v-for="(col,i) in cols" :key="i" :prop="col" :label="col" sortable></el-table-column>
          <el-table-column
            fixed="right"
            width="200"
            v-if="cols.indexOf('仓库')!=(-1)&&cols.indexOf('商品编码')!=(-1)&&!showsearch"
          >
            <template v-slot:header="scope">
              <el-input v-model="search" :tz="scope" placeholder="输入关键字搜索"></el-input>
            </template>
            <template v-slot="scope">
              <el-input
                v-model="scope.row.inputnum"
                tr="current-row-key"
                placeholder="修改数量"
                class="num"
              ></el-input>
              <el-button
                class="baocun"
                @click="baocun(scope.row['商品编码'], scope.row.inputnum,scope.row['仓库'])"
                type="text"
                size="small"
              >保存</el-button>
            </template>
          </el-table-column>


          <el-table-column
            fixed="right"
            width="200"
            v-if="showsearch"
          >
            <template v-slot="scope">
              <el-input
                v-model="scope.row.inputdqr"
                tr="current-row-key"
                placeholder="修改到期日"
                class="num"
              ></el-input>
              <el-input
                v-model="scope.row.inputnum"
                tr="current-row-key"
                placeholder="修改数量"
                class="num"
              ></el-input>
              <el-button
                class="baocun"
                @click="baocun2(scope.row.id,scope.row['数量'],scope.row['到期日'],scope.row.inputnum,scope.row.inputdqr)"
                type="text"
                size="small"
              >保存</el-button>
            </template>
          </el-table-column>

        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sale: [],
      sale_l: [],
      today: 20200422,
      downloadLoading: false,
      selectionList: [],
      cols: [],
      userlist: [],
      isshow: false,
      ware: "",
      isres: true,
      lock: true,
      inputnum: "",

      search: "",
      cktable:["大仓","小仓"],
      selck:"",
      showsearch:false,
      temporary:[],
      searchpro:''
    };
  },
  methods: {
    exportExcel(tableRef, filename, selection) {
      this.lock = true;
      this.downloadLoading = true;
      // 采用动态导入
      import("@/utils/Export2Excel").then((excel) => {
        excel.export_table_to_excel({ tableRef, filename, selection });
        this.downloadLoading = false;
      });
    },
    async issell() {
      this.lock = true;
      const result=await this.$API.pandian.pdres.get();
      result.data=JSON.parse(result.data);
        this.sale = result.data;
        this.sale_l = this.sale;
    },
    //总表
    async sumtable() {
      this.lock = true;
      if (this.isres) {
        this.isres = !this.isres;
        const result=await this.$API.pandian.pandian.get();
        result.data=JSON.parse(result.data);
          this.isres = true;
          if (result.data.length == 0) {
            alert("没有盘呢!");
            this.sale_l = [];
          } else {
            this.sale = result.data;
            this.cols = Object.keys(result.data[0]);
            console.log('cols',this.cols);
            this.sale_l = this.sale;
          }
      }
    },
    //已盘大仓
    async bigtime() {
      this.lock = true;
      if (this.isres) {
        this.isres = !this.isres;
        const result=await this.$API.pandian.bigtime.get();
          this.isres = true;
          result.data=JSON.parse(result.data);
          if (result.data.length == 0) {
            this.sale_l = [];
            alert("没有差异!");
          } else {
            this.sale = result.data;
            console.log(result.data[0]);
            this.cols = Object.keys(result.data[0]);
            console.log(this.cols);
            this.sale_l = this.sale;
          }
      }
    },
    //已盘小仓
    async smalltime() {
      this.lock = true;
      if (this.isres) {
        this.isres = !this.isres;
        const result=await this.$API.pandian.smalltime.get();
        result.data=JSON.parse(result.data);
          this.isres = true;
          if (result.data.length == 0) {
            this.sale_l = [];
            alert("没有差异!");
          } else {
            this.sale = result.data;
            this.cols = Object.keys(result.data[0]);
            console.log(this.cols);
            this.sale_l = this.sale;
          }
      }
    },
    //全部大仓
    async big() {
      this.lock = true;
      if (this.isres) {
        this.isres = !this.isres;
        const result=await this.$API.pandian.big.get();
        result.data=JSON.parse(result.data);
          this.isres = true;
          console.log(result.data);
          if (result.data.length == 0) {
            this.sale_l = [];
            alert("没有差异!");
          } else {
            this.sale = result.data;
            this.cols = Object.keys(result.data[0]);
            console.log(this.cols);
            this.sale_l = this.sale;
          }
      }
    },
    //全部小仓
    async small() {
      this.lock = true;
      if (this.isres) {
        this.isres = !this.isres;
        const result=await this.$API.pandian.small.get();
        result.data=JSON.parse(result.data);
          this.isres = true;
          if (result.data.length == 0) {
            this.sale_l = [];
            alert("没有差异!");
          } else {
            this.sale = result.data;
            this.cols = Object.keys(result.data[0]);
            console.log(this.cols);
            this.sale_l = this.sale;
          }
      }
    },
    //汇总表
   async long() {
      this.lock = true;
      if (this.isres) {
        this.isres = !this.isres;
        const result=await this.$API.pandian.long.get();
        result.data=JSON.parse(result.data);
          this.isres = true;
          if (result.data.length == 0) {
            this.sale_l = [];
            alert("没有差异!");
          } else {
            this.sale = result.data;
            this.cols = Object.keys(result.data[0]);
            console.log(this.cols);
            this.sale_l = this.sale;
          }
      }
    },
    // //大仓部分复盘
    // async createbig() {
    //   this.lock = true;
    //   if (this.isres) {
    //     this.isres = !this.isres;
    //     const result=await this.$API.pandian.pandian.get(this.ruleForm);
    //     result.data=JSON.parse(result.data);
    //     this.$http.get("pandian/createbig").then((result) => {
    //       this.isres = true;
    //       this.$message({
    //         message: result.data,
    //         type: "success",
    //       });
    //     });
    //   }
    // },
    // //小仓部分复盘
    // async createsmall() {
    //   this.lock = true;
    //   if (this.isres) {
    //     this.isres = !this.isres;
    //     const result=await this.$API.pandian.pandian.get(this.ruleForm);
    //     result.data=JSON.parse(result.data);
    //     this.$http.get("pandian/createsmall").then((result) => {
    //       this.isres = true;
    //       this.$message({
    //         message: result.data,
    //         type: "success",
    //       });
    //     });
    //   }
    // },
    // ///生成大仓所有复盘商品
    // async createbigall() {
    //   this.lock = true;
    //   if (this.isres) {
    //     this.isres = !this.isres;
    //     this.$http.get("pandian/createbigall").then((result) => {
    //       this.isres = true;
    //       this.$message({
    //         message: result.data,
    //         type: "success",
    //       });
    //     });
    //   }
    // },
    // //生成小仓所有复盘商品
    // async createsmallall() {
    //   this.lock = true;
    //   if (this.isres) {
    //     this.isres = !this.isres;
    //     this.$http.get("pandian/createsmallall").then((result) => {
    //       this.isres = true;
    //       this.$message({
    //         message: result.data,
    //         type: "success",
    //       });
    //     });
    //   }
    // },
    //临期表
    async imptable() {
      if (this.isres) {
        this.lock = true;
        this.isres = !this.isres;
        const result=await this.$API.pandian.imptable.get();
        result.data=JSON.parse(result.data);
          this.isres = true;
          if (result.data.length == 0) {
            this.sale_l = [];
            alert("没有临期!");
          } else {
            this.sale = result.data;
            this.cols = Object.keys(result.data[0]);
            console.log(this.cols);
            this.sale_l = this.sale;
          }
      }
    },
    //盘点人差异表
    async assignordetails(house) {
      if (this.isres) {
        this.lock = true;
        this.isres = !this.isres;
        const result=await this.$API.pandian.assignordetails.post({house});
        result.data=JSON.parse(result.data);
          this.isres = true;
          if (result.data.length == 0) {
            this.sale_l = [];
            alert("没有盘!");
          } else {
            this.sale = result.data;
            this.cols = Object.keys(result.data[0]);
            console.log(this.cols);
            this.sale_l = this.sale;
          }
      }
    },
    //下载表格数据
    download() {
      this.lock = true;
      this.exportExcel(this.$refs.multipleTable, this.today + "明细");
    },
    //排序
    paixun() {
      this.lock = true;
      this.prolist.sort((a, b) => a.调货 - b.调货);
    },
    async smallfp(e) {
      this.isshow = false;
      this.lock = true;
      if (this.isres) {
        this.isres = !this.isres;
        console.log(e);
        this.ware = e;
        const result=await this.$API.pandian.userlist.post({ ware: e });
        result.data=JSON.parse(result.data);
          this.isres = true;
          this.userlist = result.data;
          this.isshow = true;
      }
    },
    close() {
      this.lock = true;
      this.isshow = false;
    },
    // //分派复盘
    // async fenpai() {
    //   this.lock = true;
    //   if (this.isres) {
    //     this.isres = !this.isres;

    //     let user_list = [];
    //     this.userlist.forEach((ele) => {
    //       if (ele.ispd) {
    //         user_list.push(ele);
    //       }
    //     });
    //     console.log(this.userlist);
    //     this.$http
    //       .post("pandian/fenpai", { user_list: user_list, ware: this.ware })
    //       .then((res) => {
    //         this.isres = true;
    //         console.log(res)
    //         if (res.data&&res.data!="success") {
    //           this.sale = res.data;
    //           this.cols = Object.keys(res.data[0]);
    //           console.log(this.cols);
    //           this.sale_l = this.sale;
    //           this.$message({
    //             message: "恭喜你，这是一条成功消息",
    //             type: "success",
    //           });
    //         } else if(res.data=="success") {
    //           this.$message({
    //             showClose: true,
    //             message: "暂无为分商品",
    //             type: "error",
    //           });
    //         }
    //         else {
    //           this.$message({
    //             showClose: true,
    //             message: "错了哦，这是一条错误消息",
    //             type: "error",
    //           });
    //         }
    //       });
    //   }
    // },
    // //解除分派
    // jiechu() {
    //   this.lock = true;
    //   let user_list = [];
    //   this.userlist.forEach((ele) => {
    //     if (ele.ispd) {
    //       user_list.push(ele);
    //     }
    //   });
    //   console.log(this.userlist);
    //   this.$http
    //     .post("pandian/jiechu", { user_list: user_list, ware: this.ware })
    //     .then((res) => {
    //       if (res.data == "success") {
    //         this.$message({
    //           message: "恭喜你，这是一条成功消息",
    //           type: "success",
    //         });
    //       } else {
    //         this.$message({
    //           showClose: true,
    //           message: "错了哦，这是一条错误消息",
    //           type: "error",
    //         });
    //       }
    //     });
    // },
    unlock() {
      this.lock = !this.lock;
    },
    async baocun(pc, num, ck) {
      if(num){
      this.lock = true;
      const result=await this.$API.pandian.upnum.post({ pc: pc, num: num, ck: ck });
                if (result.data == "success") {
                  this.$message({
                    message: "恭喜你，这是一条成功消息",
                    type: "success",
                  });
                } else {
                  this.$message({
                    showClose: true,
                    message: "错了哦，这是一条错误消息",
                    type: "error",
                  });
                }
      }
    },
    async baocun2(id,num,dqr, upnum,updqr){
      const result=await this.$API.pandian.updqr.post({ id,upnum:upnum?upnum:num,updqr:updqr?updqr:dqr});
          if (result.data == "success") {
            this.$message({
              message: "恭喜你，这是一条成功消息",
              type: "success",
            });
          } else {
            this.$message({
              showClose: true,
              message: "错了哦，这是一条错误消息",
              type: "error",
            });
          }
    },
    //备份
    async backups() {
      this.lock = true;
      const result=await this.$API.pandian.backups.get();
        this.$message({
          message: result.data,
          type: "success",
        });
    },
    //根据仓库获取商品列表
    async selprolist(){
      if(!this.selck){
         this.$message({
                showClose: true,
                message: "错了哦，这是一条错误消息",
                type: "error",
              });
      }else{
        this.showsearch=false;
        const result=await this.$API.pandian.selprolist.post({ ck: this.selck });
        result.data=JSON.parse(result.data);
   
              this.sale_l=[];
              this.sale=[];
           
              this.showsearch=true;
              this.temporary=result.data;
      }
    },
    //生成库存表
    async upstocks(){
      this.lock = true;
      const result=await this.$API.pandian.upstocks.get();
            console.log(result);
              if (result.data == "success") {
            this.$message({
              message: "我成功了！",
              type: "success",
            });
          } else {
            this.$message({
              showClose: true,
              message: "我失败了。。。",
              type: "error",
            });
          }
    },
    //更新条码
    async upbarcode(){
      this.lock = true;
      const result=await this.$API.pandian.updatebarcode.get();
            console.log(result);
              if (result.data == "success") {
            this.$message({
              message: "我成功了！",
              type: "success",
            });
          } else {
            this.$message({
              showClose: true,
              message: "我失败了。。。",
              type: "error",
            });
          }
    },
    selpro(){
            this.cols = Object.keys(this.temporary[0]);
            this.sale_l=this.temporary.filter(data => {
              if(!data['商品名称']){
                return ;
              }
              // console.log(data)
               return !this.searchpro || data['商品编码'].includes(this.searchpro) || data['商品名称'].includes(this.searchpro)})
    }
  },
  watch:{
    selck:function(){this.showsearch=false},
    sale:function(){this.sale.length?this.showsearch=false:0},
  }
};
</script>
<style scoped>
.sale {
  height: auto;
  padding-bottom: 50px;
}
.top_button {
  margin: auto;
  z-index: 2;
  background: #fff;
  padding: 10px 0;
  text-align: center;
}
.today_ipt {
  width: 100px;
}
.partition {
  border: skyblue 1px solid;
  border-radius: 10px;
  display: inline-block;
  margin: 0 20px 20px 20px;
  padding: 10px 0;
}
.baocunnum {
  display: flex;
}
.baocun {
  color: #000;
  position: absolute;
}
.baocun:hover {
  color: #000;
}
.num {
  width: 80%;
}
.search-prolist{
  display: inline-block;
  padding: 10px 20px;
}
.search-pro{
    width: 200px;
    margin-left: 20px;
}
button.el-button {
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	-webkit-tap-highlight-color:transparent;
}
button.el-button {
	margin:5px;
	font-family:'Krona One',sans-serif;
	font-size:16px;
	color:#fff;
	text-shadow:1px 1px 2px rgba(0,0,0,0.5);
	cursor:pointer;
	border:none;
	border-radius:5px;
	transition:300ms;
}
</style>


    